<template>
    <div class="mu-toast" v-show="show" :class="toastClass">
        <slot>
            <span class="mu-toast-text">{{text}}</span>
        </slot>
    </div>
</template>

<script>
    export default {
        name: 'mu-toast',
        data: function () {
            return {
                show: false
            }
        },
        created: function () {
            if (this.value) {
                this.show = true
            }
        },
        computed: {
            toastClass: function () {
                return {
                    'mu-toast_top': this.type === 'top',
                    'mu-toast_right': this.type === 'right',
                    'mu-toast_bottom': this.type === 'bottom',
                    'mu-toast_left': this.type === 'left',
                    'mu-toast_middle': this.type === 'middle'
                }
            }
        },
        props: {
            value: Boolean,
            type: {
                type: String,
                default: 'middle'
            },
            time: {
                type: Number,
                default: 2000
            },
            text: String,
            position: {

            }
        },
        methods: {
            show: function (val) {
                if (val) {
                    this.$emit('input', true)
                    setTimeout(() => {
                        this.show = false
                    }, this.time)
                }
            },
            hide: function () {
                this.$emit('input', false)
            },
            value: function (val) {
                this.show = val
            }
        }
    }
</script>

<style>

</style>